<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c'%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script language="javaScript" type="text/javascript"
	src="<c:url value='/cal/calendar.js'/>" >
</script>

<link href="<c:url value='/cal/calendar.css'/>" rel="stylesheet" type="text/css">
<link href="<c:url value='/Styles/style.css'/>" rel="stylesheet" type="text/css" />

</head>
<body>
	<div class="page">
		<div id="header-wrapper">
		                <div id="header">
                		<div id="logo">
							<!-- Header -->
							
						<h4>&nbsp;</h4>
						</div>
						</div>
		</div>

		<div class="page-wrapper">
			<div class="main">
				<div class="colleft">
					<div class="col1">
						<!-- Side menu -->
						<h4><%@ include file="staff-logout.jsp"%></h4>
						<h4><%@ include file="employee-menu.jsp"%></h4>
						<h4>&nbsp;</h4>
					</div>
					<div class="col2">
						<!-- Main Content -->
								<form action="LeaveEdit" method="post">
							<table>
								<tr>
									<td>id</td>
									<td><input type="text" name="id"
										value="${param['id']}" size=15 maxlength=20
										readonly="readonly"> <input type="hidden" name="ins"
										value="true" />
									</td>
								</tr>
								<tr>
									<td>UserID</td>
									<td><input type="text" name="userid"
										value="${param['userid']}" size=15 maxlength=20
										readonly="readonly">
									</td>
								</tr>
								<tr>
									<td>From</td>
									<td><input name="from" value="${param['from']}"> <a
										href="#"
										onClick="setYears(2005, 2012);
										showCalender(this, 'from');">
											<img
											src="http://www.villamundo.net/img/casamundo/icons/calendar.png"
											alt="cal" width="20" height="20"> </a></td>
								</tr>
								<tr>
									<td>To</td>
									<td><input name="to" value="${param['to']}"> <a
										href="#"
										onClick="setYears(2005, 2012);
										showCalender(this, 'to');">
											<img
											src="http://www.villamundo.net/img/casamundo/icons/calendar.png"
											alt="cal" width="20" height="20"> </a></td>
								</tr>

								<tr>
								<tr>
									<td>Please select your leave type</td>
									<td><input type="radio" name="LeaveType"
										value="1" checked="checked">Medical <br> <input
										type="radio" name="LeaveType" value="2">Annual <br>
										<input type="radio" name="LeaveType" value="3">Compensation
										<br></td>
								</tr>
								<tr>
									<td>Please list your leave reasons</td>
									<td><input type="text" name="reason"
										value="${param['reason']}" size=15 maxlength=20></td>
								</tr>

								<tr>
									<td>Please enter your contact number:</td>
									<td><input type="text" name="contactdetail"
										value="${param['contactDetails']}" size=15 maxlength=20>
									</td>
								</tr>
								<tr>
									<td colspan=2><input type="submit"
										value="submit"> <input type="Button" value="Reset">
									</td>
								</tr>

							</table>
						</form>

						<!-- Calender Script  -->

						<table id="calenderTable">
							<tbody id="calenderTableHead">
								<tr>
									<td colspan="4" align="center"><select
										onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
                                           this.selectedIndex, false));"
										id="selectMonth">
											<option value="0">Jan</option>
											<option value="1">Feb</option>
											<option value="2">Mar</option>
											<option value="3">Apr</option>
											<option value="4">May</option>
											<option value="5">Jun</option>
											<option value="6">Jul</option>
											<option value="7">Aug</option>
											<option value="8">Sep</option>
											<option value="9">Oct</option>
											<option value="10">Nov</option>
											<option value="11">Dec</option>
									</select></td>
									<td colspan="2" align="center"><select
										onChange="showCalenderBody(createCalender(this.value, 
                                        document.getElementById('selectMonth').selectedIndex, false));"
										id="selectYear">
									</select></td>
									<td align="center"><a href="#" onClick="closeCalender();"><font
											color="#003333" size="+1">X</font> </a></td>
								</tr>
							</tbody>
							<tbody id="calenderTableDays">
								<tr style="">
									<td>Sun</td>
									<td>Mon</td>
									<td>Tue</td>
									<td>Wed</td>
									<td>Thu</td>
									<td>Fri</td>
									<td>Sat</td>
								</tr>
							</tbody>
							<tbody id="calender"></tbody>
						</table>

						<!-- End Calender Script  -->				
						<h4>&nbsp;</h4>						
					</div> <!-- end col2 -->
					
				</div> <!-- end colleft -->
				
			</div> <!-- end main -->

		</div> <!-- end page-wrapper -->

	</div> <!-- end page -->

</body>
</html>